import React, { useCallback, useEffect, useState } from 'react';
import { Select, Row, Col, Table, Badge } from 'antd';
import {
    ClockCircleOutlined,
    HomeFilled,
    DeleteOutlined
} from '@ant-design/icons';
import MainTitle from '@/components/MainTitle';
import request from '@/utils/request'
import './dashboard.scss'
import SvgIcon from "@/components/SvgIcon";
const { Option } = Select;
export default function Dashboard(props) {
    //全部楼栋信息
    const [buildings, setBuildings] = useState([]);
    const getBuildings = useCallback(async () => {
        const { data } = await request.get('/building/getManageBuildings');
        console.log('getBuildings--data==', data);
        const id = data.data.buildings[0].id
        getBuildingInfo(id);
        getRecordTableData('getup', id);
        getRecordTableData('back', id);
        getRecordTableData('clean', id);
        setBuildings(data.data.buildings);
    }, []);
    //单个楼栋信息
    const [building, setBuilding] = useState({});
    const getBuildingInfo = useCallback(async (buildingId) => {
        const { data } = await request.get('/building/getBuildingInfo', { params: { buildingId } });
        setBuilding(data.data);
    }, []);
    //最新动态
    const [getup, setGetup] = useState({});//早起动态
    const [back, setBack] = useState({});//归宿动态
    const [clean, setClean] = useState({});//打扫动态
    const getRecordTableData = useCallback(async (type, buildingId = building.id) => {
        const { data } = await request.get('record/getRecordTableData', { params: { buildingId, type } });
        //判断动态类型存入数据
        switch (type) {
            case 'getup':
                setGetup(data.data)
                break
            case 'back':
                setBack(data.data)
                break
            case 'clean':
                setClean(data.data)
                break
        }
    }, []);
    //表格头部
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            render: (text, record) => <a onClick={goUserInfo(record.account)}>{text}</a>
        },
        {
            title: '学号',
            dataIndex: 'account',
        },
        {
            title: '宿舍楼',
            dataIndex: 'buildingName',
        },
        {
            title: '宿舍楼',
            dataIndex: 'floorLayer',
        },
        {
            title: '宿舍号',
            dataIndex: 'roomNumber',
            render: (text, record) => <a onClick={goRoomInfo(record.roomId)}>{text}</a>
        },
        {
            title: '日期',
            dataIndex: 'date',
        },
        {
            title: '时间',
            dataIndex: 'time',
        }
    ]
    //楼栋切换回调
    const handleChange = useCallback((_, key) => {
        getBuildingInfo(key.key);
        getRecordTableData('getup', key.key);
        getRecordTableData('back', key.key);
        getRecordTableData('clean', key.key);
    }, []);
    //跳转用户信息页
    const goUserInfo = useCallback(id => {
        return () => {
            props.history.push(`/subject/studentsInfo?account=${id}`)
        }
    })
    //跳转宿舍信息页
    const goRoomInfo = useCallback(id => {
        return () => {
            props.history.push(`/subject/roomInfo?roomId=${id}`)
        }
    })
    useEffect(() => {
        getBuildings();
    }, []);
    return (
        <div className="dashboard">
            <div className="dashboard_top">
                <MainTitle render={<>
                    <Select onChange={handleChange} defaultValue={0}>
                        {
                            buildings.map((item, index) => {
                                return <Option value={index} key={item.id}>{item.name}</Option>
                            })
                        }
                    </Select>
                </>}>管理概览</MainTitle>
                <Row gutter={40} className="buildingInfo ">
                    <Col className="gutter-row" span={6}>
                        <div className="item">
                            <div className="item_icon">
                                <SvgIcon iconClass="tree" />
                            </div>
                            <div className="item_txt">
                                <div className="title">宿舍楼名</div>
                                <span className="num">{building.name}</span>
                            </div>
                        </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div className="item">
                            <div className="item_icon">
                                <SvgIcon iconClass="nested" />
                            </div>
                            <div className="item_txt">
                                <div className="title">楼层数</div>
                                <span className="num">{building.floorCount}</span>
                            </div>
                        </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div className="item">
                            <div className="item_icon">
                                <SvgIcon iconClass="component" />
                            </div>
                            <div className="item_txt">
                                <div className="title">房间数</div>
                                <span className="num">{building.roomCount}</span>
                            </div>
                        </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <div className="item">
                            <div className="item_icon">
                                <SvgIcon iconClass="peoples" />
                            </div>
                            <div className="item_txt">
                                <div className="title">学生数</div>
                                <span className="num">{building.studentCount}</span>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
            <div className="dashboard_newest">
                <MainTitle>最新动态</MainTitle>
                <Table
                    dataSource={getup.rows}
                    pagination={false}
                    rowKey='id'
                    columns={[...columns, { title: '是否早起', dataIndex: 'early', render: text => (text ? <Badge status="success" /> : <Badge status="error" />) }]}
                    title={() => (
                        <div className="table-title">
                            <ClockCircleOutlined />
                            早起动态
                        </div>
                    )}
                    style={{ marginTop: "40px" }}
                />
                <Table
                    dataSource={back.rows}
                    pagination={false}
                    rowKey='id'
                    columns={[...columns, { title: '是否早归', dataIndex: 'early', render: text => (text ? <Badge status="success" /> : <Badge status="error" />) }]}
                    title={() => (
                        <div className="table-title">
                            <HomeFilled />
                            归宿动态
                        </div>
                    )} />
                <Table
                    dataSource={clean.rows}
                    pagination={false}
                    rowKey='id'
                    columns={columns}
                    title={() => (
                        <div className="table-title">
                            <DeleteOutlined />
                            打扫动态
                        </div>
                    )} />
            </div>
        </div>
    )
}